<template>
	<view class="template">
		<!-- <view class="text-area">
			<view style="margin-top: 150upx;margin-bottom: 100upx;">
				<text class="title">我的模板</text>
			</view>
		</view> -->

		<view class="list">
			<view v-if="!myTplList.length" class="empty">当前还没有个人模板</view>
			<view v-else>
				<view class="list-title" style="font-size: 18px;">我的模板列表：</view>
				<view class="list-item"
					v-for="(myTplListVal, myTplListIdx) in myTplList"
					:key="myTplListIdx">
					<navigator :url="'../template/tpl_review?tpl_id='+myTplListVal._id">{{myTplListVal.name}}</navigator>
					<button class="mini" @click="deleteTpl(myTplListVal.my_tpl_id,myTplListIdx)">删除</button>
				</view>
			</view>
		</view>

		<view class="buttonTpl">
			<navigator url="../template/tpl_pub_list" class="linkBtn">公共模板列表</navigator>
		</view>
		<!-- <view class="buttonTpl">
			<button class="linkBtn" @click="importTpl">导入模板</button>
		</view> -->
		<!-- <view >
			<view>导入模板：</view>
			<view ref="input" class="input">
			</view>
		</view> -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				isAddMember: false,
				myTplList: []
			};
		},
		mounted() {
            // var input = document.createElement('input')
            // input.type = 'file'
            // input.onchange = (event) => {
            //     console.log(event)
            // }
            // this.$refs.input.$el.appendChild(input)
        },
		created() {
			this.getMyTplList();
		},
		methods: {
			getMyTplList() {
				let account_id = uni.getStorageSync("account_id");

				uniCloud.callFunction({
					name: "ha_get_my_tpl",
					data: {
						account_id
					},
					success: ({result}) => {
						// console.log(result)
						this.myTplList = result;
					},
					fail() {
						uni.showToast({
							icon: 'none',
							title: '网络异常，请稍后重试！'
						});
					}
				});
			},
			// importTpl() {
			// },
			deleteTpl(my_tpl_id,index) {
				uni.showModal({ content: '确认删除吗？', success: (res) => { if (res.confirm) {
					// console.log(my_tpl_id);
					let token = uni.getStorageSync("token");
					let account_id = uni.getStorageSync("account_id");

					if (token) {
						uniCloud.callFunction({
							name: "ha_del_my_tpl",
							data: {
								token,
								account_id,
								my_tpl_id
							},
							success: ({result}) => {
								// console.log(result);

								if ( result.status === 0 ) {
									uni.showToast({
										title: `${result.msg || "删除成功！"}`,
										duration: 1000
									});
									// location.reload();
									this.myTplList.splice(index, 1);
								} else {
									uni.showModal({
										content: `${result.msg || "网络异常，请稍后重试！"}`,
										showCancel: false,
										complete: function () {
											uni.navigateTo({url: "/pages/user/user_login"});
										}
									});
								}
							},
							fail() {
								uni.showToast({
									icon: 'none',
									title: '网络异常，请稍后重试！'
								});
							}
						});
					} else {
						uni.navigateTo({url: "/pages/user/user_login"});
					}
				}}});
			}
		}
	}
</script>

<style lang="less">
	uni-page-body {
		height: 100%;
	}

	.template {
		width: 100%;
		height: 100%;
		position: relative;
	}

	// .tplList {
	// 	justify-content: space-between;
	// 	width: 90%;
	// 	display: flex;
	// 	margin: 10rpx 0;
	// }

	.list-item navigator {
		margin-left: 20rpx;
	}

	.list-item button {
		margin-right: 10rpx;
	}

	.tpl__btn {
		background-color: #007aff;
		color: #fff;
		width: 100%;
		// position: fixed;
		left: 0;
		bottom: 0;
	}

	.empty {
		width: 100%;
		color: #666666;
		position: absolute;
		left: 50%;
		bottom: 50%;
		text-align: center;
		transform: translate(-50%, -50%);
	}

	.buttonTpl {
		width: 100%;
		margin-bottom: 40upx;
	}

	.buttonTpl .linkBtn {
		font-size: 30upx;
		display: block;
		line-height: 80upx;
		margin: 0 auto;
		width: 90%;
		text-align: center;
		margin-bottom: 20upx;
		border-radius: 40upx;
		box-shadow: 0 3px 5px rgba(5, 26, 180, 0.35);
		font-weight: bold;
		background: linear-gradient(135deg, #576fec 0%, #576fec 76%, #536dec 76%);
		color: #fff;
	}

</style>
